<template>
  <div class="app-container">
    <div class="header">
      <h1>业务管理系统</h1>
      <p class="description">这里是业务管理的主页面，您可以在此开发各种业务功能</p>
    </div>

    <el-row :gutter="20" class="dashboard-cards">
      <el-col v-for="module in businessModules" :key="module.id" :span="8">
        <el-card class="card-item">
          <div slot="header" class="clearfix">
            <span>{{ module.title }}</span>
          </div>
          <div class="card-content">
            <p>{{ module.description }}</p>
            <el-button
              type="primary"
              @click="gotoModule(module.route)"
            >
              {{ module.buttonText }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="quick-actions">
      <h3>快捷操作</h3>
      <el-button-group>
        <el-button type="primary" icon="el-icon-plus">新建业务</el-button>
        <el-button type="success" icon="el-icon-search">查询业务</el-button>
        <el-button type="warning" icon="el-icon-download">导出数据</el-button>
        <el-button type="info" icon="el-icon-setting">系统设置</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
/**
 * 业务管理主页面
 * 提供业务系统的入口和概览信息
 */
export default {
  name: 'Business',

  data() {
    return {
      /**
       * 业务模块配置数组
       * 包含所有业务模块的基本信息和路由配置
       */
      businessModules: [
        {
          id: 1,
          title: 'Word模板生成',
          description: '使用docxtemplater生成动态Word文档，支持模板变量替换',
          buttonText: '进入模板生成',
          route: '/business/docx-template',
        },
        {
          id: 2,
          title: '表格操作',
          description: '实现了上移下移操作，用于调整表格行的顺序',
          buttonText: '进入模块',
          route: '/business/table-template',
        },
        {
          id: 3,
          title: 'PDF功能',
          description: 'PDF打印、预览和下载功能',
          buttonText: '进入PDF功能',
          route: '/business/pdf-preview',
        },
        {
          id: 4,
          title: '移动端1px问题',
          description: '解决移动端1px问题的方法',
          buttonText: '进入模块',
          route: '/business/mobile-1px',
        }
      ]
    }
  },

  methods: {
    /**
     * 跳转到指定功能模块
     * @param {string} moduleName - 模块名称
     */
    gotoModule(route) {
      this.$router.push(route)
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .header {
    text-align: center;
    margin-bottom: 30px;

    h1 {
      color: #303133;
      margin-bottom: 10px;
    }

    .description {
      color: #606266;
      font-size: 14px;
    }
  }

  .dashboard-cards {
    margin-bottom: 30px;

    .card-item {
      margin-bottom: 20px;

      .card-content {
        min-height: 120px;

        p {
          color: #606266;
          margin-bottom: 15px;
          line-height: 1.6;
        }
      }
    }
  }

  .quick-actions {
    text-align: center;

    h3 {
      margin-bottom: 15px;
      color: #303133;
    }
  }
}
</style>
